<template>
  <div id="card">
    <div id="cardTop">
      <!-- 卡片1 -->
      <el-card class="box-card">
        <div class="clearfix">
          <h1>商品（Spu）介绍</h1>
        </div>
        <div class="text item">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            :rules="rules"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="title">
              <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="原始价格" prop="originalPriceRaw">
              <el-input
                v-model.number="ruleForm.originalPriceRaw"
                placeholder="0.00"
              >
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="当前价格" prop="priceRaw">
              <el-input v-model.number="ruleForm.priceRaw" placeholder="0.00">
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="VIP价格" prop="vipPriceRaw">
              <el-input
                v-model.number="ruleForm.vipPriceRaw"
                placeholder="0.00"
              >
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="剩余库存" prop="stock" placeholder="0">
              <el-input v-model="ruleForm.stock" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="运费模板">
              <el-select
                v-model="ruleForm.freightTemplate"
                clearable
                placeholder="请选择类目等级"
              >
                <el-option
                  style="height: 46px"
                  v-for="item in tableData"
                  :key="item.id"
                  :label="item.label"
                  :value="item.freightTemplateDO.templateName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否在售" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio :label="1">在售</el-radio>
                <el-radio :label="0">下架</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品图片">
              <div class="uploading">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :file-list="listImg"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </div>
            </el-form-item>
            <el-form-item label="商品单位" prop="unit">
              <el-input v-model="ruleForm.unit"></el-input>
            </el-form-item>
            <el-form-item label="所属类目">
              <el-cascader
                v-model="ruleForm.category"
                :props="{ checkStrictly: true, value: 'value', label: 'label' }"
                :options="spuTitl"
                @change="list"
                ref="cascader"
                placeholder="请选择类目"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="商品简介">
              <el-input v-model="ruleForm.description"></el-input>
            </el-form-item>
            <el-form-item label="商品详细介绍" prop="detail">
              <!-- <tinymce-editor api-key="API_KEY" v-model="content" :init="{plugins: 'wordcount'}"></tinymce-editor> -->
              <!-- <tinymce-editor api-key="API_KEY" v-model="content" :init="init"></tinymce-editor> -->
              <tinymce-editor
                ref="editor"
                v-model="ruleForm.detail"
              ></tinymce-editor>
              <!-- <zhangyuTinymce :content="form.desc" @editorChange="editorChange"></zhangyuTinymce> -->
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <!-- 卡片2 -->
      <el-card class="box-card" id="contents">
        <div class="clearfix">
          <h1>商品类型(sku)</h1>
          <button
            type="button"
            class="el-button el-button--primary"
            @click="add()"
          >
            <i class="el-icon-edit"></i>
            <span>添加</span>
          </button>
          <el-table :data="ruleForm.skuList" style="width: 100%">
            <el-table-column prop="barCode" label="sku条形码"></el-table-column>
            <el-table-column prop="title" label="类型名"></el-table-column>
            <el-table-column
              prop="originalPriceRaw"
              label="原价"
            ></el-table-column>
            <el-table-column prop="priceRaw" label="现价"></el-table-column>
            <el-table-column prop="vipPriceRaw" label="VIP价"></el-table-column>
            <el-table-column prop="stock" label="库存"></el-table-column>
            <el-table-column label="操作" align="right">
              <template>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <!-- 卡片3 -->
      <el-card class="box-card">
        <div class="clearfix">
          <h1>商品参数(sku)</h1>
          <button
            type="button"
            class="el-button el-button--primary"
            @click="additions()"
          >
            <i class="el-icon-edit"></i>
            <span>添加</span>
          </button>
          <el-table :data="ruleForm.attributeList" style="width: 100%">
            <el-table-column prop="attribute" label="商品"></el-table-column>
            <el-table-column prop="value" label="商品规格"></el-table-column>
            <el-table-column label="操作" align="right">
              <template>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <!-- 添加1-->
      <el-dialog :title="titleName" :visible.sync="FormVisible">
        <el-form :model="listType" label-width="100px" :rules="tworules">
          <!-- 优惠卷数量 -->
          <el-form-item prop="barCode" label="类型条码">
            <el-input
              v-model="listType.barCode"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <!-- 每个银领 -->
          <el-form-item prop="title" label="类型名称">
            <el-input v-model="listType.title" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="图片(可空)">
            <div class="uploading">
              <el-upload
                class="avatar-uploader"
                action="http://192.168.1.99:8080/upload/admin"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <!-- :show-file-list="false" -->
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
          <!-- 原始价格 -->
          <el-form-item prop="originalPriceRaw" label="原始价格">
            <el-input v-model="listType.originalPriceRaw" style="width: 250px">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <!-- 当前价格 -->
          <el-form-item prop="priceRaw" label="当前价格">
            <el-input v-model="listType.priceRaw" style="width: 250px">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <!-- VIP价格 -->
          <el-form-item prop="vipPriceRaw" label="VIP价格">
            <el-input v-model="listType.vipPriceRaw" style="width: 250px">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <!-- 库存 -->
          <el-form-item prop="stock" label="库存">
            <el-input v-model="listType.stock" style="width: 250px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="FormVisible = false">取 消</el-button>
          <el-button type="primary" @click="affirmtwo()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加2 -->
      <el-dialog :title="titleName" :visible.sync="dialogFormVisible">
        <el-form :model="parameter" label-width="100px" :rules="threerules">
          <!-- 优惠卷数量 -->
          <el-form-item prop="attribute" label="商品参数名称">
            <el-input
              v-model="parameter.attribute"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <!-- 每个银领 -->
          <el-form-item prop="value" label="商品参数值">
            <el-input v-model="parameter.value" style="width: 250px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="affirmthree()">确 定</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="affirm()">
          <div>确 定</div>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import list from "../../api/goods/goodslist";
import tinymceEditor  from "../../components/tinymce";
import zhangyuTinymce from '@/components/zhangyuTinymce.vue'
import { log } from '../../../../qycache/tuyijie/js_sdk/QuShe-SharerPoster/QS-SharePoster/app';
// import tinymceVue from "@tinymce/tinymce-vue";
// var Editor = require("@tinymce/tinymce-vue").default;
export default {
  components: {
    tinymceEditor,
    zhangyuTinymce
  },
  data() {
    return {
       form: {
                desc: ''
            },
            value:'',
      dialogImageUrl: '',
      dialogVisible: false,
      spuTitl:[],//级联
      radios:'', //单选
      dialogFormVisible: false,   
      FormVisible: false,
      titleName: "",  
      imageUrl: "", //图片
      radio:'',  //单选
      levelLabel: {},
      form:{},
      tableData:[],
       tinymceHtml: '请输入内容',
      listImg:[],//初始的img数组
      //  init: {
      //     language:'zh_CN',
      //     height: 300,
      //     plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu ',
      //     toolbar1: 'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
      //     toolbar2: 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',
      //     branding: true,
      //     menubar: true,
      //     images_upload_handler: (blobInfo, success, failure) => {
      //       const img = 'data:image/jpeg;base64,' + blobInfo.base64()
      //       success(img)
      //       console.log(failure)
      //     }
      //   },
      levelLabel:[
        {
           value: 0,
          label: "全国不包邮"
        },
        {
           value: 1,
          label: "全国包邮2"
        },
        {
           value: null,
          label: "xxx"
        }
      ],
      // 商品类型(sku)
      listType:{
        barCode:'',
        title:'',
        originalPriceRaw:'',
        priceRaw:'',
        vipPriceRaw:'',
        stock:'',
        // price: this.typeForm.presentPrice * 100,
        // originalPrice: this.typeForm.initialPrice * 100,
        // vipPrice: this.typeForm.vipPrice * 100
      },
      // 参数
      parameter:{
        attribute:'',
        value:""
      },
      ruleForm: {
        title:'',//商品名称1
        originalPriceRaw:'',//原始价格1
        priceRaw:'',//当前价格1
        vipPriceRaw:'',//VIP价格
        stock:'0',//剩余库存
        freightTemplate:'',//运费模板1
        status:'',//是否在售
        imgList:'',//商品图片
        unit:'',//商品单位
        category:'',//所属类目
        description:'',//商品简介
        detail:'',//商品详细介绍
        skuList:[],//商品类型数组
        attributeList:[],//商品参数数组,
      },
      rules: {
        title: [
          { required: true, message: "商品名称不能为空！", trigger: "blur" }
        ],
        originalPriceRaw: [
          { required: true, message: "商品原价不能为空！", trigger: "blur" }
        ],
        priceRaw: [
          { required: true, message: "商品现价不能为空！", trigger: "blur" }
        ],
        deliveryDeadline: [
          { required: true, message: "商品VIP价格不能为空！", trigger: "blur" }
        ],
        templateName: [
          { required: true, message: "类目名字不能为空！", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "物件单位不能为空！", trigger: "blur" }
        ]
      },
      tworules:{      
          barCode: [
          { required: true, message: "类型条码不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "类型名称不能为空！", trigger: "blur" }
        ],
        originalPriceRaw: [
          { required: true, message: "类型原价不能为空", trigger: "blur" }
        ],
        priceRaw: [
          { required: true, message: "类型现价不能为空", trigger: "blur" }
        ],
        vipPriceRaw: [
          { required: true, message: "类型VIP价格不能为空", trigger: "blur" }
        ],
        stock: [
          { required: true, message: "类型库存不能为空", trigger: "blur" }
        ]
      },
      threerules:{
        attribute:[
          { required: true, message: "属性名称不能为空", trigger: "blur" }
        ],
        value:[
          { required: true, message: "属性值不能为空", trigger: "blur" }
        ]
      },
      content: ""
    };
  },
  methods: {
    // 上传图片
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      editorChange(e){
        console.log(e)
            this.form.desc = e
        },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
         console.log(this.dialogImageUrl)
      },
    handleAvatarSuccess(res, file) {
      console.log()
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
     this.form.imgList.push(res.url)
     console.log(this.form.imgList);  
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add() {
      (this.titleName = "添加"), (this.FormVisible = true);
    },
    additions() {
      (this.titleName = "添加"), (this.dialogFormVisible = true);
    },
    //弹框二
    affirmtwo(){
      this.ruleForm.skuList.push(this.listType)
      this.FormVisible = false
    },
     //弹框三
    affirmthree(){
      this.ruleForm.attributeList.push(this.parameter)
      this.dialogFormVisible = false
    },
    // 取消
    cancel(){
      this.$router.push("/commodity/List");
    },
       // sup树
    supshu() {
        let _this=this;
      list.supTree().then(res => {
        _this.spuTitl =res.data.data;
      });
    },
    list(value){
        this.ruleForm.category=value[value.length-1]  //获取级联id  
     },
    // 运费
    comments(){
      let _this=this
      list.comments().then(res => {
        _this.tableData=res.data.data            
      });
    },
  //  spuDTO: {"imgList":["https://mall-sixblog.oss-cn-shenzhen.aliyuncs.com/bg/9fe9f40376384266962fcb14c4bbfcb6.jpg"],
  //  "priceRaw":"888","title":"李","originalPriceRaw":"8888","vipPriceRaw":"88","freightTemplateId":1,"status":1,"unit":"300",
  //  "categoryId":1036520,
  //  "detail":"<p><img src=\"https://mall-sixblog.oss-cn-shenzhen.aliyuncs.com/bg/d4bcf51652f4451f859c1856a8e4173d.jpg\" alt=\"\" width=\"600\" height=\"360\" /></p>",
  //  "img":"https://mall-sixblog.oss-cn-shenzhen.aliyuncs.com/bg/9fe9f40376384266962fcb14c4bbfcb6.jpg",
  //  "price":88800,"originalPrice":888800,"vipPrice":8800,

  //  "attributeList":[{"attribute":"1","value":"1"}],
  //  "skuList":[{"barCode":"1","title":"1","originalPriceRaw":"1","priceRaw":"1","vipPriceRaw":"1","stock":"1","price":100,"originalPrice":100,"vipPrice":100}]}
  
//   attributes: Array(1)
// category: 1036520
// description: ""
// detail: ""
// freightTemplate: ""
// imgList: "<p><img src="https://himg.bdimg.com/sys/portraitn/item/336a616f617665add0" alt="" width="56" height="56" /></p>"
// originalPriceRaw: 8888
// priceRaw: 888
// skuList: Array(0)
// status: 1
// stock: "0"
// title: "李"
// unit: "300"
// vipPriceRaw: 88
    //确定添加
    affirm(){
      console.log(this.imageUrl)
      let _this=this;
      let data={
        title:_this.ruleForm.title,//商品名称
        originalPriceRaw:_this.ruleForm.originalPriceRaw,//原始价格
        priceRaw:_this.ruleForm.priceRaw,//当前价格
        vipPriceRaw:_this.ruleForm.vipPriceRaw,//VIP价格
        stock:_this.ruleForm.stock,//剩余库存 
        freightTemplateId:_this.ruleForm.freightTemplate,//运费模板
        status:_this.ruleForm.status,//是否在售
        imgList:_this.dialogImageUrl,//商品图片
        unit:_this.ruleForm.unit,//商品单位
        detail:_this.ruleForm.detail,//商品详细介绍
        categoryId:_this.ruleForm.category,//所属类目

        description:_this.ruleForm.description,//商品简介
    
        skuList:_this.ruleForm.skuList,//商品类型数组
        attributeList:_this.ruleForm.attributeList,//商品参数数组,
        
        originalPrice:_this.ruleForm.originalPriceRaw,
        price:_this.ruleForm.priceRaw,
        vipPrice:_this.ruleForm.vipPriceRaw,
      } 
      // console.log(data)
      list.addition(data).then(res=>{
        console.log(res);
      })
    }
  },
  created() {
    this.supshu()
    this.comments()
  },
     watch:{
    //重制
    dialogFormVisible(){
      this.$nextTick(() => {    
      this.$refs.ruleForm.clearValidate();
      })
    }
  }
};
</script>

<style scoped>
#card {
  width: 100%;
  height: 100%;
}
.el-scrollbar__wrap {
  height: 501px;
}
#cardTop {
  width: 80vw;
  height: 100vh;
  margin: auto !important;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
#contents {
  margin: 20px 0px;
}
h1 {
  margin: 20px 0;
}
/*  */
.avatar-uploader .el-upload {
  border: 1px dashed #409eff;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #409eff;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.uploading {
  margin-left: 25px;
  margin-bottom: 20px;
}
.uploading span {
  height: 0px;
  color: #606266;
}
.uptitle {
  height: 0px;
}
</style>